<template>
  <!-- 顶部导航栏 -->
  <div class="top-nav">
    <div class="top-nav-left">直聘</div>
    <div class="top-nav-mid top-nav-mid-1">
      <router-link to="/Home">首页</router-link>
    </div>
    <div class="top-nav-mid top-nav-mid-2">职业</div>
    <div class="top-nav-mid">
      <router-link to="/Enter">公司</router-link>
    </div>
    <div class="top-nav-mid">
      <router-link to="/Search">搜索</router-link>
    </div>
    <div class="top-nav-right top-nav-right-1">
      <router-link to="/Resume">简历</router-link>
    </div>
    <div class="top-nav-right">
      <router-link to="/Resume">个人</router-link>
    </div>
    <div class="top-nav-right top-cir"><router-link to="/Resume"></router-link>
    </div>
  </div>
  <div class="main">
    <!-- 搜索框 -->
    <div class="search">
      <div class="search-left">
        <div class="search-left-1">职业类型</div>
        <!-- <div class="search-left-2" value="搜索职位、公司"></div> -->
        <input type="text" value="搜素职位、公司">
      </div>
      <div class="search-right">搜索</div>
    </div>
    <!-- 职位推荐栏 -->
    <div class="recommend">
      <div class="recommend-1">
        <div class="recommend-1-left">推荐职位</div>
        <div class="recommend-1-line"></div>
        <div class="recommend-1-right">添加求职期望</div>
      </div>
      <div class="recommend-line"></div>
      <div class="recommend-2">
        <div class="recommend-2-in">
          <div class="recommend-2-in-text">求职类型</div>
          <div class="recommend-2-in-text">薪资待遇</div>
          <div class="recommend-2-in-text">工作经验</div>
          <div class="recommend-2-in-text">学历要求</div>
          <div class="recommend-2-in-text">公司行业</div>
          <div class="recommend-2-in-text">公司规模</div>
        </div>
      </div>
    </div>

    <!-- 中部 -->
    <div class="mid">
      <div class="mid-left">
        <div class="mid-left-1">
          <div class="mid-left-1-con-1">
            <div class="mid-left-1-con-1-text">算法工程师(异构计算)</div>
            <div class="mid-left-1-con-1-text2">30-50K</div>
          </div>
          <div class="mid-left-1-con-2">
            <div class="mid-left-1-con-2-text">3-5年</div>
            <div class="mid-left-1-con-2-text">硕士</div>
            <div class="mid-left-1-con-2-text">大模型算法</div>
            <div class="mid-left-1-con-2-text">机器学习</div>
            <div class="mid-left-1-con-2-text">强化学习</div>
          </div>
          <div class="mid-left-1-con-3"></div>
          <div class="mid-left-1-con-4">某知名计算机软件公司</div>
        </div>
        <div class="mid-left-2">
          <div class="mid-left-2-con-1">
            <div class="mid-left-2-con-1-text">美团招聘理货员</div>
            <div class="mid-left-2-con-1-text2">5-8K</div>
          </div>
          <div class="mid-left-2-con-2">
            <div class="mid-left-2-con-2-text">经验不限</div>
            <div class="mid-left-2-con-2-text">学历不限</div>
            <div class="mid-left-2-con-2-text">兼职</div>
            <div class="mid-left-2-con-2-text">全职</div>
            <div class="mid-left-2-con-2-text">轮班</div>
          </div>
          <div class="mid-left-2-con-3"></div>
          <div class="mid-left-2-con-4">某知名公司</div>
        </div>
      </div>
      <div class="mid-right">
        <div class="mid-right-top">
          <div class="mid-right-top-1">
            <div class="mid-right-top-1-text">算法工程师(异构计算)</div>
            <div class="mid-right-top-1-text2">30-50K</div>
          </div>
          <div class="mid-right-top-2">
            <div class="mid-right-top-2-text">感兴趣</div>
            <div class="mid-right-top-2-text2">立即联系</div>
          </div>
          <div class="mid-right-top-3">某地&nbsp;&nbsp;&nbsp;3-5年&nbsp;&nbsp;&nbsp;硕士</div>
          <div class="mid-right-top-4">
            <div class="mid-right-top-4-text">职位描述:</div>
            <div class="mid-right-top-4-text2">微信扫码分享&nbsp;&nbsp;&nbsp;&nbsp;举报</div>
          </div>
        </div>
        <div class="mid-right-mid">
          <div class="mid-right-mid-line">
            <div class="mid-right-mid-text">大模型算法</div>
            <div class="mid-right-mid-text">机器学习</div>
            <div class="mid-right-mid-text">强化学习</div>
            <div class="mid-right-mid-text">图像算法</div>
            <div class="mid-right-mid-text">气象算法</div>
            <div class="mid-right-mid-text">通信算法</div>
            <div class="mid-right-mid-text">Python</div>
            <div class="mid-right-mid-text">C/C++</div>
            <div class="mid-right-mid-text">Java</div>
          </div>
          <div class="mid-right-mid-line2">
            <div class="mid-right-mid-text">优秀开源项目经历</div>
            <div class="mid-right-mid-text">算法工程化经历</div>
            <div class="mid-right-mid-text">LINUX环境开发</div>
            <div class="mid-right-mid-text">嵌入式平台</div>
            <div class="mid-right-mid-text">NPU、DSP、GPU</div>
          </div>
        </div>
        <div class="mid-right-text">
          <div class="mid-right-text-line">1、负责将传统图像算法、AI智能算法性能优化和高效性能部署，达到能满足产品量产所需要的功耗及性能要求；</div>
          <div class="mid-right-text-line">2、负责调研各嵌入式芯片平台异构资源性能评估以及高性能计算库封装和产品化落地；</div>
          <div class="mid-right-text-line"> 3、负责Soc平台异构计算技术路线的发展规划，推进产品线平台技术发展，保障算法落: </div>
          <div class="mid-right-text-line">任职要求: </div>
          <div class="mid-right-text-line">1、有过高效部署优化计算机视觉、语音处理、数字信号处理等方向算法业务落地经验</div>
          <div class="mid-right-text-line">2、熟悉c/c++编程，熟悉LINUX环境开发，熟悉并行或者异构计算，比如ARM NEON、 OPENMP、oPENCL、cUD A等</div>
          <div class="mid-right-text-line">3、具有海思、TI、Novatek等嵌入式平台的异构资源如NPU、DSP、GPU开发经验优先</div>
          <div class="mid-right-text-line">4、熟悉CEVA XM6、CADENCE等DSP平台指令集和有过开发经验优先；</div>
          <div class="mid-right-text-line"> 5、自动化，电子工程，通信，计算机等相关专业硕士及以上学历。</div>

        </div>
      </div>
    </div>
  </div>
  <!-- 底部 -->
</template>

<script>
export default {
  name: "career",
  data() {

  },
}
</script>

<style>
body {
  background-color: #F4F5FA;
}
/* 顶部导航栏 */
.top-nav {
  display: flex;
  width: 100%;
  height: 67px;
  background-color: hsla(232, 47%, 56%, 1);
}

.top-nav-left {
  line-height: 67px;
  margin-left: 115px;
  font-size: 36px;
  color: hsla(0, 0%, 100%, 1);

}

.top-nav-mid {
  line-height: 67px;
  padding-right: 80px;
  font-size: 24px;
  color: hsla(0, 0%, 100%, 1);
}

.top-nav-mid-1 {
  margin-left: 205px;
}
.top-nav-mid-2{
  color: #000;
}

.top-nav-right {
  line-height: 67px;
  padding-right: 17px;
  font-size: 24px;
  color: hsla(0, 0%, 100%, 1);
}

.top-nav-right-1 {
  margin-left: 445px;
}

.top-cir {
  margin-top: 7px;
  width: 51px;
  height: 46px;
  background: #F2EFEF;
  border-radius: 50%;
  border: 1px solid #F2EFEF;
}



/* 主体 */
.main{
  width: 71.5%;
  margin: 0 auto;
}
/* 搜索框 */
.search {
  display: flex;
  height: 95px;
  margin: 0 auto;
  margin-top: 84px;
  background-color: hsla(232, 47%, 56%, 1);
  border-radius: 30px;
}

.search-left {
  margin: 5px;
  border-radius: 30px;
  width: 88%;
  background-color: hsla(0, 0%, 100%, 1);
}

.search-left-1 {
  width: 182px;
  height: 85px;
  border-radius: 30px 0px 0px 30px;
  font-size: 24px;
  line-height: 85px;
  padding-left: 34px;
  background-color: hsla(232, 77%, 85%, 1);
  color: black;
}
input {
        position: relative;
        left: 182px;
        top: -85px;
        outline: none;
        width: 85%;
        height: 100%;
        border: 0;
        border-radius: 0px 30px 30px 0px;
        font-size: 24px;
        line-height: 85px;
        color: #ACB6F7;
        text-indent: 32px;
      }
.search-right {
  line-height: 94px;
  padding-left: 35px;
  font-size: 30px;
  color: hsla(0, 0%, 100%, 1);
}

/* 推荐职位 */
.recommend {
  /* width: 71.5%; */
  height: 152px;
  margin: 0 auto;
  border-radius: 20px;
  border: 1px solid #181515;
  background-color: hsla(0, 0%, 100%, 1);
  margin-top: 38px;
}

.recommend-1 {
  height: 82px;
  display: flex;

}

.recommend-1-left {
  padding-top: 21px;
  padding-left: 93px;
  padding-right: 67px;
  font-weight: bold;
  font-size: 31px;
  color: #000000;

}

.recommend-1-line {
  width: 1px;
  height: 54px;
  background: #C9C9C9;
  border: 0px solid #C9C9C9;
  margin-top: 21px;
}

.recommend-line {
  height: 4px;
  background: #C9C9C9;
  border: 0px solid #C9C9C9;
  margin-left: 30px;
  margin-right: 49px;
}

.recommend-1-right {
  margin-top: 37px;
  margin-left: 37px;
  color: #908d8d;
}

.recommend-2-in {
  display: flex;
  margin-left: 85px;
  margin-top: 9px;
}

.recommend-2-in-text {
  background-color: hsla(230, 37%, 97%, 1);
  font-size: 18px;
  padding-left: 10px;
  line-height: 35px;
  margin-right: 10px;
  color: #000;
  width: 111px;
  height: 35px;
  border-radius: 6px;
  border: 1px solid hsla(230, 37%, 97%, 1);
}

/* 底部 */
.footer {
  width: 90%;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  margin-bottom: 49px;
}
.footer-h{
  font-size: 24px;
  color: #212B36;
  justify-content: space-between;  
}
.footer-text {
  list-style-type: none;
  font-size: 19px;
  color: #212B36;
  padding-bottom: 19px;

}
.footer-text-h{
  margin-top: 48px;
}
.footer-h-last{
text-align: end;
  font-size: 25px;
  color: #212B36;
}
.footer-bottom-1{
  display: flex;
  width: 90%;
  height: 21px;
  margin: 0 auto;
  padding-bottom: 21px;
  margin-bottom: 23px;
}
.footer-bottom-1-text{
  font-size: 19px;
  line-height: 21px;
  color: #3A424B;
  margin-right: 37px;

}
/* 中部 */
.mid{
  /* width: 71.5%; */
  display: flex;
  justify-content: space-between;
margin-left: -17%;
margin-bottom:56px ;
}

.mid-left-1{
  width: 442px;
  height: 161px;
  margin-left: 205px;
  margin-top: 23px;
background: #F9F7F7;
border-radius: 11px;
border: 2px solid #9C6ADE;
}
.mid-left-1-con-1 {
  display: flex;
  justify-content: space-between;
   margin-top: 10px;
  margin-left: 13px;
  margin-right: 16px;
  font-size: 20px;
color: #9C6ADE;
}
.mid-left-1-con-1-text2 
{
   color: rgb(209, 93, 16);
}
.mid-left-1-con-2{
  display: flex;
  margin-top: 8px;
  margin-left: 13px;
  margin-right: 16px;
  font-size: 18px;
}
.mid-left-1-con-2-text{
  background-color: rgb(226, 226, 230);
  font-size: 16px;
  padding: 0 7px;
  margin-right: 5px;
  margin-bottom: 5px;
  line-height: 32px;
  color: #000;
  height: 32px;
  border-radius: 6px;
  border: 1px solid hsla(230, 37%, 97%, 1);
}
.mid-left-1-con-3{
height: 32px;
background-color: rgb(231, 231, 231);
}
.mid-left-1-con-4{
  font-size: 17px;
  background-color: #bec4ea;
  height: 43px;
  border-radius:0px 0px 11px 11px;
  line-height: 43px;
  padding-left: 30.3%;
}
.mid-left-2 {
  width: 442px;
  height: 161px;
  margin-left: 205px;
  margin-top: 55px;
background: hsla(0, 0%, 100%, 1);
border-radius: 11px;
border: 2px solid hsla(0, 0%, 100%, 1);
}
.mid-left-2-con-1{
display: flex;
  justify-content: space-between;
   margin-top: 13px;
  margin-left: 13px;
  margin-right: 16px;
  font-size: 20px;
color: #000;
}
.mid-left-2-con-1-text2 
{
   color: rgb(209, 93, 16);
}
.mid-left-2-con-2{
  display: flex;
  margin-top: 8px;
  margin-left: 13px;
  margin-right: 16px;
  font-size: 18px;
}
.mid-left-2-con-2-text{
  background-color: rgba(238, 236, 236, 0.985);
  font-size: 16px;
  padding: 0 7px;
  margin-right: 5px;
  margin-bottom: 5px;
  margin-top: 10px;
  line-height: 32px;
  color: #000;
  height: 32px;
  border-radius: 6px;
  border: 1px solid hsla(230, 37%, 97%, 1);
}
.mid-left-2-con-3{
  margin-top: 23px;
  width: 422px;
  height: 2px;
  margin-left: 6px;
  background: #9C6ADE;
border: 1px solid #9C6ADE;
}
.mid-left-2-con-4{
  font-size: 17px;
  height: 43px;
  line-height: 43px;
  padding-left: 30.3%;
  margin-top: -5px;
}
/* 中部右栏 */
.mid-right{
  width: 856px;
  height: 467px;
  margin-top: 23px;
  margin-left: 67px;
  background-color: #fff;
  border-radius: 11px;
}
.mid-right-top{
  margin-left: 26px;
  margin-bottom: 10px;
}
.mid-right-top-1{
  display: flex;
}
.mid-right-top-1-text{
   font-size: 24px;
  margin-top: 13px;
   font-weight: bold;
}
.mid-right-top-1-text2{
  padding-left: 33px; 
  font-size:20px;
  color: rgb(209, 93, 16);
 margin-top: 13px;
  padding-top: 7px;
}
.mid-right-top-2{
  display: flex;
  justify-content: end;
}
.mid-right-top-2-text{
  margin-top: -13px;
  margin-right:38px;
  width: 94px;
  height: 29px;
background-color: #bec4ea;
border-radius: 7px;
line-height: 29px;
padding-left: 20px;
color: #fff;
}
.mid-right-top-2-text2{
  margin-top: -13px;
  margin-right:38px;
  width: 94px;
  height: 29px;
background-color: #fff;
border-radius: 7px;
line-height: 29px;
padding-left: 13px;
color: #9C6ADE;
border: 1px solid rgb(168, 168, 173);
}
.mid-right-top-3{
width: 400px;
height: 15px;
font-weight: 400;
font-size: 14px;
padding-left: 9px;
color: #212B36;
}
.mid-right-top-4{
display: flex;
justify-content: space-between;
margin-top: 13px;
}
.mid-right-top-4-text{
  font-size: 15px;
  font-weight: bold;
}
.mid-right-top-4-text2{
color: #ded9d9;
margin-right: 15px;
font-size: 15px;
}
.mid-right-mid-line{
  display: flex;
  margin-left: 26px;
}
.mid-right-mid-line2{
  display: flex;
  margin-top: -7px;
   margin-left: 26px;
}
.mid-right-mid-text{
  background-color: rgba(238, 236, 236, 0.985);
  font-size: 13px;
  padding: 0 7px;
  margin-right: 5px;
  margin-bottom: 5px;
  margin-top: 10px;
  line-height: 32px;
  color: #000;
  height: 32px;
  border-radius: 6px;
  border: 1px solid hsla(230, 37%, 97%, 1);
}
.mid-right-text{
  margin-top: 10px;
  margin-left: 26px;
  font-size: 12.5px;
  color: #000;
}
.mid-right-text-line{
 padding-top: 7px;
}
</style>